<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.css" rel="stylesheet">
	<link href="../css/bootstrap-table.css" rel="stylesheet">
	<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
	<script type="text/javascript" src="../../utils/CommonUtil.js"></script>
	<script type="text/javascript" src="../js/comparisonScheme.js"></script>
	<style type="text/css">
		.selBtn {
			float:left;
			margin-left:20px;
			height:30px;
			width:70px;
			background-color:#1890FF;
			border-radius:5px;
			border: 0px;
			color:white;
		}
		.selBtn:hover {
			background-color: #00BFFF;
		}
		.shadow {
			box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
			border-radius: 0.25rem!important;
		}
		.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		    float: left;
		}
		.bootstrap-table {
			margin: 30px!important;
			width: calc(100% - 60px);
		}
		.shadow .bootstrap-select {
			margin-top: 10px;
		}
		.blueActive{
			color: #0093FF;
		}
		.container {
			width: 95%;
		}
		.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
			color: #1890ff;
			border: none;
		    border-bottom: 1px solid #1890ff;
		}
		a {
			color: #555;
		}
	</style>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;">
	<div id="operate" style="position: absolute;top: 0px;left: 20px;right: 0px;height: 50px;">
		<div class="col-md-12" style="position: absolute;top: 10px;padding-left: 5px;padding-right: 5px;">

			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 70px;font-weight: normal;">对比方案</label>
			<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					title="请选择方案" data-none-results-text="未找到相关方案{0}" data-select-all-text="全选" data-deselect-all-text="取消全选" id="compProj" 
					data-width="250px" data-size="10" data-count-selected-text="已选择{1}个方案中的{0}个"></select>
			
			<button class="selBtn" onclick=select()>查询</button>
		</div>
	</div>
	<div style="width: 100%;overflow-y: scroll;height: calc(100% - 70px);position: absolute;top: 50px;">
		<div id="divEnvir" class="shadow" style="margin-top: 10px;margin-bottom: 20px;margin-left: 20px;width: calc(100% - 40px);min-height: 400px;position: relative;">
			<p style="padding-top: 20px;">
				<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 25px;font-family: '黑体 Bold', '黑体';">环保专题</span>
			</p>
			<div id="echartEnvir" style="width: 100%;height: 300px;margin-top: 10px;"></div>
			<table id="tableEnvir"></table>
		</div>
		<div id="divEcon" class="shadow" style="margin-top: 10px;margin-bottom: 20px;margin-left: 20px;width: calc(100% - 40px);min-height: 400px;position: relative;">
			<p style="padding-top: 20px;">
				<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 25px;font-family: '黑体 Bold', '黑体';">技术经济专题</span>
			</p>
			<label class="control-label col-sm-1" style="margin-top: 20px;margin-left: 40px;padding: 0px;width: 60px;font-weight: normal;">指标选择</label>
			<select class="form-control selectpicker" id="indexSel" data-width="250px">
				<option value="5">固定运行成本（亿元）</option>
				<option value="6">可变运行成本（亿元）</option>
				<option value="7">启停成本（亿元）</option>
			</select>
			
			<div id="echartEcon" style="width: 100%;height: 300px;margin-top: 50px;"></div>
			
			<table id="tableEcon"></table>
		</div>
		<div id="divRen" class="shadow" style="margin-top: 10px;margin-bottom: 20px;margin-left: 20px;width: calc(100% - 40px);min-height: 400px;position: relative;">
			<p style="padding-top: 20px;">
				<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 25px;font-family: '黑体 Bold', '黑体';">可再生能源消纳专题</span>
			</p>
			<div id="echartRen" style="width: 100%;height: 300px;margin-top: 10px;"></div>
			<table id="tableRen"></table>
		</div>
		<div id="divSysSta" class="shadow" style="margin-top: 10px;margin-bottom: 20px;margin-left: 20px;width: calc(100% - 40px);min-height: 400px;position: relative;">
			<p style="padding-top: 20px;">
				<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 25px;font-family: '黑体 Bold', '黑体';">系统稳定性专题</span>
			</p>
			<div id="echartSysSta" style="width: 100%;height: 300px;margin-top: 10px;"></div>
			<table id="tableSysSta"></table>
		</div>
		<div id="divUnit" class="shadow" style="margin-top: 10px;margin-bottom: 20px;margin-left: 20px;width: calc(100% - 40px);min-height: 400px;position: relative;">
			<p style="padding-top: 20px;">
				<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 25px;font-family: '黑体 Bold', '黑体';">机组运行专题</span>
			</p>
			<div class="container">
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item active"><a class="nav-link" data-toggle="tab" href="#unitHours">机组利用小时数</a></li>
					<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#times">启停台次</a></li>
				</ul>
				<div class="tab-content">
					<div id="unitHours" class="container tab-pane active">
						<div id="echartUnitHours" style="width: 100%;height: 300px;margin-top: 10px;"></div>
					</div>
					<div id="times" class="container tab-pane">
						<div id="echartStarStopTimes" style="width: 100%;height: 300px;margin-top: 10px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="divSection" class="shadow" style="margin-top: 10px;margin-bottom: 20px;margin-left: 20px;width: calc(100% - 40px);min-height: 400px;position: relative;">
			<p style="padding-top: 20px;">
				<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 25px;font-family: '黑体 Bold', '黑体';">断面分析专题</span>
			</p>
			<table id="tableSection"></table>
			<!-- <label class="control-label col-sm-1" style="margin-top: 20px;margin-left: 40px;padding: 0px;width: 60px;font-weight: normal;">指标选择</label>
			<select class="form-control selectpicker" id="sectionSel" data-width="250px"></select>
			
			<div id="echartSection" style="width: 100%;height: 300px;margin-top: 50px;"></div> -->
		</div>
	</div>
</body>
</html>